/*
适用于 dedecms 的一些公用scss文件
*/

// 分页部分
@mixin fenyes($base) {
  .fenye {
    padding: 30px 10px;
    text-align: center;
    overflow: hidden;
    clear: both;

    li {
      display: inline-block;
    }

    em {
      font-style: normal;
    }

    a {
      display: inline-block;
      zoom: 1;
      padding: 8px 17px;
      background: #f2f2f2;
      font-size: 14px;
      color: #414141;
      margin-right: 8px;

      &:hover,
      &.thisclass {
        background-color: $base;
        color: #fff;
      }

      &:last-child {
        margin-right: 0px;
      }
    }
  
    @media screen and (max-width: 1200px) {
      .fenye {
        padding: 10px 4px;

        a {
          margin-right: 4px;
          margin-bottom: 4px;
        }
      }
    }
  }
}


// 主体内容
@mixin body($name) {
  .#{$name} {
    color: #000;
    font-weight: 500;
    font-family: '';
    padding: 14px 0;

    h3:not(.layui-code-h3) {
      color: #333;
      font-weight: 700;
      line-height: 24px;
      padding-left: 12px;
      font-size: 22px;
      position: relative;
      margin-top: 30px;
      margin-bottom: 15px;

      &:after {
        content: "";
        width: 4px;
        height: 18px;
        background: #009688;
        top: 3px;
        position: absolute;
        left: 0;
      }
    }

    code {
      font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
      font-size: 12px;
      position: relative;
      display: inline-block;
      padding: 0 6px;
      text-align: center;
      border-radius: 2px;
      height: 18px;
      line-height: 18px;
      color: #c7254e;
      border: none;
      vertical-align: middle;
      white-space: pre-wrap;
      background-color: #f2f2f2;
    }

    blockquote {
      margin-bottom: 10px;
      padding: 15px;
      line-height: 22px;
      border-left: 5px solid #009688;
      border-radius: 0 2px 2px 0;
      background-color: #f2f2f2;
      margin-top: 20px;
      margin-bottom: 15px;
    }

    p {
      line-height: 2;
      margin-bottom: 6px;
      font-size: 16px;
    }

    img {
      max-width: 100%;
      height: auto;
      margin-top: 10px;
      margin-bottom: 10px;
    }

    h2,
    h3:not(.layui-code-h3),
    h4,
    h5,
    h6 {
      margin-top: 20px;
      color: #000;
      margin-bottom: 10px;
    }

    h4 {
      font-weight: bold;
      color: #000;
    }

    ul {
      padding-left: 20px;
      list-style: auto;

      li {
        font-size: 14px;
        color: #333;
        list-style: disc;
      }
    }

    strong {
      color: #000;
    }

    li {
      * {
        font-size: 14px;
        color: #333;
      }
    }

    ul,
    ol {
      margin-bottom: 12px;
      color: #999;
    }

    ol {
      list-style-type: decimal;
      padding-left: 20px;

      li {
        font-size: 14px;
        color: #333;
        list-style-type: decimal;
      }
    }
    @content;
  }
}

// 表单的统一部分
@mixin xh-forms($h:40px){
  .xh-inline{ @include dis-in; } 
  .xh-input,.xh-textarea,select{
     font-size: 14px;font-family: "Microsoft Yahei";
     border: 1px solid #e6e6e6;
     background-color: #fff;
     border-radius: 2px;}
  .xh-input,select{  line-height: $h; height: $h; width: 100%; padding:0px 10px; }
  .xh-input{
    &.xh-form-danger{ border-color: $base; }
    &:focus{ border-color: $base; }
  }
  .xh-textarea{ line-height: $h; height: $h*4;padding:10px;  width: 100%; }
  .xh-btn{ border:none; background: $base; color: #fff; 
    line-height: $h; height: $h; padding: 0px 10px; 
    width: 100%; 
    cursor:pointer;  
    &:hover{ background: darken($base,5%); }
    &.border{
       background:none; color: $color;
    }
   }
  select{&:focus{ border-color: $base; }}
  .xh-bd-flex{ margin-bottom: 12px;
   display: flex;
  align-items:center;
    &.algin-top{
      align-items:flex-start;
    }
  .xh-bd-item{
    flex:1;
    &:nth-child(n+2){
      margin-left: 13px;
    }
  }
  .xh-bd-icon{ width: 13px;}
  .xh-bd-lable{ text-align: right; width: 80px; line-height: $h; height: $h; }
 }
}
